"use client";

import { BytemdViewer } from "@/components/Bytemd";
import Loading from "@/components/Loading";
import { Badge } from "@/components/ui/badge";
import { Wrapper } from "@/components/Wrapper";
import { useIsMobile } from "@/hooks/use-mobile";
import { getBlogList, GetBlogListDTO } from "@/modules/blog";
import { defaultPageIndex, defaultPageSize, formatDate } from "@/utils";
import { useSetState } from "ahooks";
import { useRouter } from "nextjs-toploader/app";
import { useMemo } from "react";

export default function Page() {
  const isMobile = useIsMobile();
  const router = useRouter();
  const [pageData, setPageData] = useSetState<GetBlogListDTO>({
    pageIndex: defaultPageIndex,
    pageSize: defaultPageSize,
  });

  const getBlogListController = getBlogList(pageData);

  const blogList = useMemo(
    () => getBlogListController.data?.blogs,
    [getBlogListController]
  );
  return (
    <Wrapper
      className={
        isMobile ? "px-2 pt-[calc(60px+10px)]" : "px-20 pt-[calc(60px+60px)]"
      }
    >
      <div className="w-full h-full p-4 flex flex-col gap-y-10 items-center justify-center">
        <Loading visible={getBlogListController.loading} />
        {blogList?.map((blog) => {
          return (
            <div
              onClick={() => {
                router.push(`/blog/${blog.id}`);
              }}
              key={blog.id}
              className="w-full max-w-[900px] h-fit rounded-lg bg-white flex flex-col gap-y-4 shadow-md hover:transform hover:scale-105 transition-all duration-600 hover:shadow-2xl"
            >
              {/* 标题 */}
              <div className="w-full h-fit text-2xl text-[#2094ff] text-center mt-6">
                {blog.title}
              </div>
              {/* 时间 */}
              <div className="w-full h-fit text-sm text-center">
                {formatDate(blog.createdAt)}
              </div>
              {/* 正文 */}
              <div className="w-full h-fit max-h-[450px] overflow-y-hidden relative">
                <div className="w-full h-full max-h-[430px] px-8">
                  <BytemdViewer value={blog.content || ""} />
                </div>
                {/* 模糊背景 */}
                <div className="absolute bottom-0 left-0 right-0 h-1/3 bg-gradient-to-t from-white via-white/60 to-transparent z-10" />
              </div>
              {/* 脚步 */}
              <div className="w-full h-fit text-sm text-center py-4 px-8 flex justify-end items-center">
                <div className="flex gap-x-2">
                  {blog.tags.map((tag) => (
                    <Badge key={tag.id}>{tag.name}</Badge>
                  ))}
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </Wrapper>
  );
}
